<template>
    <div class='search'>
        <div class="header">
            <div @click='onBack'>
                <svg data-v-07814981="" data-v-032e78c4="" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-icon">
                <path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M7 12.0006L15.0012 3.99992L16.4154 5.41417L9.82838 12.0008L16.4143 18.5876L15 20.0017L7 12.0006Z" fill="currentColor"></path>
                </svg>
            </div>
            <div class="searchBox">
                <form action="/">
                <van-search v-model="value" @input="onInput" placeholder="你在找什么？" />
                </form>
            </div>
            <div @click="onSearch">搜索</div>
        </div>
        <div class="searchCt" v-if="show">
            <div class="list">
                 <p v-for="item in completion" :key="item.id">{{item.completion.text}}</p>
            </div>
            <div class="hot-search">
                <h2>商品分类</h2>
                <ul>
                    <li v-for="item,index in category" :key="item.id" @click="onGoods(index)">{{item.category.name}}</li>
                </ul>
            </div>
         </div>
        <div class="container" v-else>
            <div class="history"></div>
            <div class="hot-search">
                <h2>热门搜索</h2>
                <ul>
                    <li v-for="item in completion" :key="item.id">{{item.completion.text}}</li>
                </ul>
            </div>
            <div class="hot-search">
                <h2>热门系列</h2>
                <ul>
                    <li v-for="item,index in category" :key="item.id" @click="onGoods(index)">{{item.category.name}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Search ,Toast} from 'vant';
import axios from "axios";
import _ from 'lodash'

Vue.use(Search);
    export default {
        name: '',
        data(){
            return {
                value:"",
                searchList:[],
                completion:[],
                category:[],
                show:false,

              
            }
    },
    components: {
        
    },

    created(){},

    async mounted(){
        await this.loadData()
    },
    
    methods: {
        async loadData(){
            let url=`/api-search/cn/zh/search-box?q=${this.value}&c=cnweb&v=20210322`
            let list = await axios.get(url
            )
            this.searchList = list.data.searchBox.universal
            this.completion = _.filter(this.searchList,function(item){
               return item.completion
           }) 
            this.category = _.filter(this.searchList,function(item){
               return item.category
           }) 
        },
        async onInput(val){
            this.show = true
            await this.loadData()
        },
        onSearch(val){
            
        },
        onBack(){
            this.$router.go(-1)
        },
        onGoods(index){
            console.log(1)
            this.$router.push({
                name:'classifychild',
                params:{id:this.category[index].category.key}
            })
            console.log(this.category[0])
        }
    },
    computed:{
       
    },
    }
</script>
<style lang='stylus' scoped>
@import "../../assets/border.styl"
.header
    height .5rem
    display flex
    border_1px(0 0 1px 0)
    align-items center
    text-align center
    justify-content space-evenly
    .searchBox
        width 2.8rem
        .van-search
            padding 0 .1rem 0 .1rem
            .van-search__content
                border-radius .16rem
.searchCt
    background #FFF
    position absolute
    left 0
    height 3rem
    z-index 999
    width 100%
    padding-top: .2rem;
    padding-bottom: .2rem;
    .list
        width 100%
        border_1px(0 0 1px 0)
        p 
            padding-left: .29rem;
            min-height: .4rem;
            line-height: .4rem;
            color: #111;



.hot-search
    width: 100%;
    padding-top: .3rem;
    padding-bottom: .2rem;
    position: relative;
    border_1px(0 0 1px 0)
    h2 
        color: #111;
        font-weight: 700;
        font-size: .14rem;
        line-height: .2rem;
        height: .2rem;
        padding-left: .28rem;
    ul 
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: .2rem;
        padding-left: .14rem;
        transition: all .2s;
        height: auto;
        overflow: hidden;
        
        li 
            height: .3rem;
            line-height: .3rem;
            padding-left: .14rem;
            padding-right: .14rem;
            font-size: .12rem;
            color: #111;
            background: #f5f5f5;
            border-radius: .15rem;
            margin: 0 .05rem .1rem;
            text-overflow: ellipsis;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            

</style>
